<template>
    <div class="app-dsg-list">
        <ul class="designer-list">
            <li class="designer-item van-hairline--bottom" v-for="item in dataSource" :key="item.id" @click="readDetail(item.id)">
                <div class="person">
                    <div class="avatar">
                        <img v-if="item.headimgurl" :src="item.headimgurl" alt="">
                        <img v-else src="@/assets/img/avatar.png" alt="">
                    </div>
                    <div class="txt">
                        <p class="main">
                            {{item.userName}}
                            <span class="area">
                                {{item.serviceMinMoney}}-{{item.serviceMaxMoney}}/m<sup>2</sup>
                            </span>
                        </p>
                        <p class="tags">
                            <span>#{{tags[Math.floor((Math.random() * tags.length))]}}#</span>
                        </p>
                        <p class="infos">
                            <van-tag plain type="primary" v-if="item.worksList && item.worksList.length && item.worksList[0]">
                                作品{{item.worksList.length}}个
                            </van-tag>
                            <van-tag plain type="primary">
                                接单{{item.orderNum}}次
                            </van-tag>
                        </p>
                    </div>
                </div>
                <div class="works" v-if="item.worksList && item.worksList.length && item.worksList[0]">
                    <div 
                        v-for="(img, index) in item.worksList"
                        :key="img.id" class="img" 
                        v-if="index <= 3"
                        v-lazy:background-image="img.coverUrl">
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>

export default {
    props: {
        dataSource: Array
    },
    data(){
        return {
            tags: [
                '与自然的相处方式其实就是“等待”',
                '用语言表达设计是另一种设计行为',
                '设计是是捕捉事物本质的感觉能力和洞察能力',
                '因生活而设计，因设计而美好',
                '椅子不光要讲功能，还要创造一种景观',
                '不可抄袭他人之创意，不论有何前提',
                '设计可以改变世界',
                '设计源于生活，细节成就品质',
                '艺术源于生活，而生活是艺术的来源',
                '原来设计真的可以改变生活',
                '创造未来，领选于时代潮流',
                '你是设计师，不是战斗机，需要亲和力',
                '少就是多，简洁就是丰富'
            ],
        }
    },
    methods: {
        readDetail(id){
            this.$router.push({name: 'designer', params: {id: id}})
        },
    },
    created(){
    }
}
</script>


<style lang="less">
.app-dsg-list{
    .designer-list{
        padding: 0 15px;
        .designer-item{
            padding: 15px 0;
            &:after{
                border-color: #ccc;
            }
            .person{
                display: flex;
                align-items: center;
                .avatar{
                    width: 60px;
                    height: 60px;
                    margin-right: 10px;
                    border-radius: 50%;
                    overflow: hidden;
                }
                .txt{
                    flex: 1;
                    line-height: 1.4;
                    .main{
                        font-size: 15px;
                        .area{
                            float: right;
                            color: #d85354;
                            font-size: 115%;
                            font-family: Arial, Helvetica, sans-serif;
                            & > sup{
                                position: relative;
                                top: -4px;
                                font-size: 11px;
                            }
                        }
                    }
                    .tags{
                        &>span{
                            display: inline-block;
                            font-size: 12px;
                            margin-right: 5px;
                            color: #999;
                        }
                    }
                    .infos{
                        .van-tag{
                            margin-right: 5px;
                        }
                    }
                }
            }
            .works{
                width: 100%;
                display: flex;
                margin: 10px -2px 0;
                .img{
                    width: 25%;
                    margin: 0 2px;
                    padding-bottom: 22.5%;
                    border-radius: 2px;
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: cover;
                }
            }
        }
    }
}
</style>

